<template>
  <div class="button-demo">
    <lwq-button type="primary">primary</lwq-button>
    <lwq-button type="success">Success</lwq-button>
    <lwq-button type="info">Info</lwq-button>
    <lwq-button type="warning">Warning</lwq-button>
    <lwq-button type="danger">Danger</lwq-button>
    <br/><br/>
    <lwq-button type="primary" plain>Primary</lwq-button>
    <lwq-button type="success" plain>Success</lwq-button>
    <lwq-button type="info" plain>Info</lwq-button>
    <lwq-button type="warning" plain>Warning</lwq-button>
    <lwq-button type="danger" plain>Danger</lwq-button>
    <br/><br/>
    <lwq-button size="large">Large</lwq-button>
    <lwq-button size="small">Small</lwq-button>
    <br/><br/>
    <lwq-button ref="lwq-buttonRef">Test lwq-button</lwq-button>
    <lwq-button round>Round lwq-button</lwq-button>
    <lwq-button circle>lwq</lwq-button>
    <lwq-button disabled>Disabled lwq-button</lwq-button>
     <br/><br/>
    <lwq-button size="large" loading>Large</lwq-button>
    <lwq-button size="large" icon="arrow-up">Large</lwq-button>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import LwqButton from './Button.vue';
defineOptions({
  name: 'button-demo'
});
import type { ButtonInstance } from './types';
const buttonRef = ref<ButtonInstance | null>(null);
onMounted(() => {
   if (buttonRef.value) {
      console.log(buttonRef.value.ref)

   }
})
</script>
